<template>
    <div class="fillcontain">
        <el-form :model="formData" inline="true" label-position="labelPosition" labelWidth="120px"
                 class="demo-form-inline" style="margin-left: 5px;margin-top: 5px">
            <el-col span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" @change="schoolchange" v-model="formData.schoolid"
                               placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" v-model="formData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" v-model="formData.chargeStatus" placeholder="费用类型">
                        <el-option
                            v-for="item in chargestatuslist"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" v-model="formData.paytype" placeholder="交费类型">
                        <el-option
                            v-for="item in paytypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        style="width: 220px"
                        placeholder="搜索姓名"
                        v-model="formData.username">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col span="6">
                <el-form-item label="">
                    <el-date-picker size="mini"
                                    style="width: 220px"
                                    v-model="formData.beginTime"
                                    type="date"
                                    value-format="timestamp"
                                    placeholder="开始日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col span="6">
                <el-form-item label="">
                    <el-date-picker size="mini"
                                    v-model="formData.endTime"
                                    type="date"
                                    value-format="timestamp"
                                    placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col offset="8">
                <el-button style="margin-top: 10px" type="primary" @click="this.initData" icon="el-icon-search">搜索
                </el-button>
            </el-col>
        </el-form>
        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                    property="id"
                    label="序号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="username"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="ename"
                    label="授课老师"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="schoolname"
                    label="学校"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="chargedate"
                    label="交费日期"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="startend"
                    label="起止日期"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="chargecash"
                    label="现金"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="otherCharge"
                    label="非现金"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="singlecash"
                    label="单价"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="feeprint(scope.$index,scope.row)" type="text" size="small">打印</el-button>
                        <el-button @click="deleteFee(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="count">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import * as moment from 'moment';
    import {mapActions, mapState, mapGetters} from 'vuex'
    import {queryChargeFeeList, getUserList, chargeFeeDetail} from '@/api/getData'
    import ElCol from "element-ui/packages/col/src/col";
    import ElRow from "element-ui/packages/row/src/row";
    import ElForm from "../../node_modules/element-ui/packages/form/src/form.vue";
    import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item.vue";

    export default {
        computed: {
            ...mapGetters(['schoolList', 'channelList', 'periodList', 'empschoolMap', 'sexList', 'paytypeList', 'chargestatuslist'])
        },
        data() {
            return {
                empsList: [],
                formData: {
                    id: '',
                    username: '',
                    eid: '',
                    schoolid: '',
                    paytype: '',
                    chargeStatus: '',
                    beginTime: '',
                    endTime: '',
                    pageno: 1,
                    pagesize: 10,

                },
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            ElFormItem,
            ElForm,
            ElRow,
            ElCol,
            headTop,
        },
        deleteFee(index, row) {

        },
        created() {
            this.initData();
        },
        mounted() {
            if (this.periodList == null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
            this.initData();
        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.initData()
            },

            async feeprint(index, row) {
                const v = await chargeFeeDetail({"data": {"id": row.id}});
                if (v.success == true) {
                    var chargefee = v.data;
                    this.$router.push({name: '/feeprint', params: {chargefee: chargefee}});
                }
            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            async initData() {
                const v = await queryChargeFeeList({"data": this.formData});
                if (v.success == true) {
                    const feelist = v.data.values;
                    this.count = v.data.totalCount;
                    this.tableData = [];
                    feelist.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.username = item.username;
                        tableData.ename = item.ename;
                        tableData.schoolname = item.schoolname;
                        tableData.chargedate = item.chargedate;
                        tableData.startend = item.startend;
                        tableData.chargecash = item.chargecash;
                        tableData.otherCharge = item.otherCharge;
                        tableData.singlecash = item.singlecash;
                        this.tableData.push(tableData);
                    })
                }
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    /* .table_container {
         padding: 20px;
     }*/
    .el-form-item {
        margin-bottom: 5px;
    }
</style>
